<template>
	<view class="content">
		<view class="postings">
			<view class="post_title">
				盘库明细
			</view>
			<view class="post_con" v-for="(item,index)  in data.maMaterialList" :key="index">
				<text>{{item.materialName}}</text>
				<text>{{item.quantity+item.unitName}}</text>
			</view>
		</view>
		<view class="postings basic">
			<view class="post_con">
				<text>盘库时间</text>
				<text>{{data.createTime==null?'':data.createTime}}</text>
			</view>
			<view class="post_con">
				<text>盘库部门/人</text>
				<text>{{data.deptName}} / {{data.userName}}</text>
			</view>
			<view class="post_con">
				<text>编号</text>
				<text>{{data.recordNumber}}</text>
			</view>
		</view>
		<view class="postings facility">
			<view class="post_con">
				<text>备注</text>
				<text>{{data.remark}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				dictList: []
			};
		},
		onLoad(option) {
			this.getDict();
			this.getInfo(option.id)
		},
		methods: {
			getDict() {
				//联网加载数据
				this.apis.commonApi
					.getDict("unit_type")
					.then((res) => {
						this.dictList = res.data;
					console.log(this.dictList)
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
					});
			},
			getInfo(id) {
				let that = this
				//联网加载数据
				this.apis.materialsApi.maInOutRecord(id).then(res => {

					res.data.maMaterialList.forEach((item) => {
						that.dictList.forEach((itemType) => {
							if (itemType.dictValue == item.unit) {
								item.unitName = itemType.dictLabel;
							}
						});
					});
					this.data = res.data
				}).catch(() => {
					//联网失败的回调,隐藏下拉刷新的状态
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$subheadColor:#111111;
	$titleColor:#333333;

	@mixin boldTitle {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	@mixin bordcon {
		font-size: 28rpx;
		color: #333333;
	}

	@mixin padding {
		padding: 30rpx 0;
	}

	.content {
		padding: 20rpx;
		box-sizing: border-box;

		.postings {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 0 32rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.post_title {
				@include bordcon @include padding border-bottom: 1rpx solid #EEEEEE;
			}

			.post_con {
				display: flex;
				justify-content: space-between;

				@include padding text:nth-child(1) {
					@include boldTitle
				}

				text:nth-child(2) {
					@include bordcon
				}

				// 待租
				.rent {
					color: #F74D39 !important;
				}

				// 已租
				.occupancy {
					color: #44D94B !important;
				}
			}
		}

		.basic {
			.post_title {
				display: flex;
				justify-content: space-between;

				@include bordcon @include padding text:nth-child(2) {
					@include boldTitle
				}
			}

			.post_con {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;

				@include padding text:nth-child(1) {
					@include boldTitle
				}

				text:nth-child(2) {
					@include bordcon
				}
			}

			view:last-child {
				border-bottom: none;
			}
		}

		.facility {
			.post_con {
				display: flex;
				flex-direction: column;

				text:nth-child(1) {
					margin-bottom: 20rpx;
				}
			}

			view:last-child {
				border-bottom: none;
			}

		}
	}
</style>
